<!--
	THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-simple
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 250px; margin: 0;width: 500px;">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var params = {
      value: 52, //数值
      title: "温度计"
    }

    var app = {};
    var TP_value = params.value;
    var kd = [];
    var Gradient = [];
    var leftColor = '';
    var showValue = '';
    var boxPosition = [65, 0];
    var TP_txt = ''
    // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
    for (var i = 0, len = 135; i <= len; i++) {
      if (i < 10 || i > 130) {
        kd.push('')
      } else {
        if ((i - 10) % 20 === 0) {
          kd.push('-3');
        } else if ((i - 10) % 4 === 0) {
          kd.push('-1');
        } else {
          kd.push('');
        }
      }

    }
    //中间线的渐变色和文本内容
    if (TP_value > 50) {
      TP_txt = '';
      Gradient.push({
        offset: 0,
        color: '#93FE94'
      }, {
        offset: 0.5,
        color: '#E4D225'
      }, {
        offset: 1,
        color: '#E01F28'
      })
    } else if (TP_value >= 35) {
      TP_txt = '';
      Gradient.push({
        offset: 0,
        color: '#93FE94'
      }, {
        offset: 1,
        color: '#E4D225'
      })
    } else {
      TP_txt = '';
      Gradient.push({
        offset: 1,
        color: '#93FE94'
      })
    }

    leftColor = Gradient[Gradient.length - 1].color;
    // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
    var option = {
      // backgroundColor: '#098',
      // backgroundColor: 'white',
      title: {
        text: params.title,
        textStyle: {
          color: "#010081",
          align: "center",
        },
        left: "45%",
      },
      grid: { // 控制图的大小，调整下面这些值就可以，
        left: "30%",
        top: "3%",
        bottom: "14%",
      },
      yAxis: [{
        show: false,
        data: [],
        min: 0,
        max: 135,
        axisLine: {
          show: false
        }
      }, {
        show: false,
        min: 0,
        max: 50,
      }, {
        type: 'category',
        data: ['', '', '', '', '', '', '', '', '', ''],
        position: 'left',
        offset: -80,
        axisLabel: { // 单位
          fontSize: 10,
          color: 'black'
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      }],

      xAxis: [{
        show: false,
        min: -10,
        max: 80,
        data: []
      }, {
        show: false,
        min: -10,
        max: 80,
        data: []
      }, {
        show: false,
        min: -10,
        max: 80,
        data: []
      }, {
        show: false,
        min: -5,
        max: 80,

      }],
      series: [{
        name: '条',
        type: 'bar',
        // 对应上面XAxis的第一个对)象配置
        xAxisIndex: 0,
        data: [{
          value: (TP_value + 30), //这个改那个颜色刻度的
          label: {
            normal: {
              show: true,
              position: boxPosition,
              width: 20,
              height: 100,
              formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}',
              rich: {
                back: {
                  align: 'center',
                  lineHeight: 50,
                  fontSize: 30,
                  fontFamily: 'digifacewide',
                  color: leftColor
                },
                unit: {
                  fontFamily: '微软雅黑',
                  fontSize: 15,
                  lineHeight: 50,
                  color: leftColor
                },
                downTxt: {
                  lineHeight: 50,
                  fontSize: 25,
                  align: 'center',
                  color: leftColor
                }
              }
            }
          },
        }],

        barWidth: 18,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
          }
        },
        z: 2
      }, {
        name: '白框',
        type: 'bar',
        xAxisIndex: 1,
        barGap: '-100%',
        data: [134],
        barWidth: 18,
        itemStyle: {
          normal: {
            color: '#0C2E6D',
            barBorderRadius: 50,
          }
        },
        z: 1
      }, {
        name: '外框',
        type: 'bar',
        xAxisIndex: 2,
        barGap: '-100%',
        data: [135],
        barWidth: 28,
        itemStyle: {
          normal: {
            color: '#4577BA',
            barBorderRadius: 50,
          }
        },
        z: 0
      }, {
        name: '圆',
        type: 'scatter',
        hoverAnimation: false,
        data: [0],
        xAxisIndex: 0,
        symbolSize: 38,
        itemStyle: {
          normal: {
            color: '#93FE94',
            opacity: 1,
          }
        },
        z: 2
      }, {
        name: '白圆',
        type: 'scatter',
        hoverAnimation: false,
        data: [0],
        xAxisIndex: 1,
        symbolSize: 50,
        itemStyle: {
          normal: {
            color: '#0C2E6D',
            opacity: 1,
          }
        },
        z: 1
      }, {
        name: '外圆',
        type: 'scatter',
        hoverAnimation: false,
        data: [0],
        xAxisIndex: 2,
        symbolSize: 60,
        itemStyle: {
          normal: {
            color: '#4577BA',
            opacity: 1,
          }
        },
        z: 0
      }, {
        name: '刻度',
        type: 'bar',
        yAxisIndex: 0,
        xAxisIndex: 3,
        label: {
          normal: {
            show: true,
            position: 'left',
            distance: 15, // 刻度数据位置
            color: '#000000', // 刻度数字颜色
            fontSize: 14,
            formatter: function(params) {
              if (params.dataIndex > 130 || params.dataIndex < 10) {
                return '';
              } else {
                if ((params.dataIndex - 10) % 20 === 0) {
                  return params.dataIndex - 30; //这个改刻度的，当减70的时候刻度是从-60开始不是从零开始
                } else {
                  return '';
                }
              }
            }
          }
        },
        barGap: '-100%',
        data: kd,
        barWidth: 1,
        itemStyle: {
          normal: {
            color: '#000000', // 刻度线颜色
            barBorderRadius: 120,
          }
        },
        z: 0
      }]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    };



    // 定时生成随机数，实时刷新数据
    setInterval(function() {
      //debugger
      var rdm = Math.floor(Math.random() * 100);

      var params = {
        value: rdm, //数值
        title: "温度计"
      }

      var Gradient = [];
      //中间线的渐变色和文本内容
      var warnTxt = "";
      if (params.value > 50) {
        Gradient.push({
          offset: 0,
          color: "#93FE94",
        }, {
          offset: 0.5,
          color: "#E4D225",
        }, {
          offset: 1,
          color: "#E01F28",
        });
        warnTxt = "温度过高";
      } else if (params.value >= 35) {
        Gradient.push({
          offset: 0,
          color: "#93FE94",
        }, {
          offset: 1,
          color: "#E4D225",
        });
        warnTxt = "温度正常";
      } else {
        Gradient.push({
          offset: 1,
          color: "#93FE94",
        });
        warnTxt = "温度过低";
      }

      let leftColor = Gradient[Gradient.length - 1].color;
      var boxPosition = [65, 0];

      myChart.setOption({
        series: [{
          data: [{
            value: params.value + 30,
            label: {
              normal: {
                show: true,
                position: boxPosition,
                width: 20,
                height: 100,
                formatter: "{back| " +
                  params.value +
                  " }{unit|°C}\n{downTxt|" +
                  " " +
                  "}",
                //formatter:  item.senValue ,
                rich: {
                  back: {
                    align: "center",
                    lineHeight: 50,
                    fontSize: 30,
                    fontFamily: "digifacewide",
                    color: leftColor,
                  },
                  unit: {
                    fontFamily: "微软雅黑",
                    fontSize: 15,
                    lineHeight: 50,
                    color: leftColor,
                  },
                  downTxt: {
                    lineHeight: 50,
                    fontSize: 25,
                    align: "center",
                    color: leftColor,
                  },
                },
              },
            },
            name: params.title,
          }, ],
        }, ],
      });
    }, 1000);
  </script>
</body>

</html>